<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #mycanvas {
            /* border:1px solid #ccc; */
        }
    </style>
</head>

<body>
    <canvas id="mycanvas"></canvas>
    <script>
        var mycanvas = document.getElementById("mycanvas");
        mycanvas.width = 800;
        mycanvas.height = 500;
        var cvs = mycanvas.getContext("2d");
        // cvs.moveTo(50, 50);
        // cvs.arc(50, 50, 50, 0, 6 * Math.PI/180);
        function time(){
        //    绘制原型带刻度
        var x = 200;
        y = 200;
        r = 200;
        //获取当前时间
        date=new Date();
        hour=date.getHours();
        minutes=date.getMinutes();
       seconds=date.getSeconds();
        //给度数减去90  时针过半需要分钟/2
        var  H=(-90+hour*30+(minutes/2))*Math.PI/180;
        var M=(-90+minutes*6)*Math.PI/180;
        var S=(-90+seconds*6)*Math.PI/180;
        cvs.arc(x, y, r, 0, 360 * Math.PI / 180);
        cvs.strokeStyle = "#ccc";
        cvs.stroke();
        cvs.closePath();
        cvs.beginPath();
        //分针k刻度
        for (var i = 0; i < 60; i++) {
            cvs.moveTo(x, y);
            cvs.arc(x, y, r, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180);
        }
        cvs.strokeStyle = "#000";
        cvs.stroke();
        cvs.closePath();
        //用圆覆盖，只流短刻度
        cvs.beginPath();
        cvs.arc(x, y, r * (19 / 20), 0, 2 * Math.PI);
        cvs.fillStyle = "#fff";
        cvs.fill();
        cvs.strokeStyle = "#fff";
        cvs.stroke();


        //    时针刻度
        cvs.beginPath();
        for (var i = 0; i < 12; i++) {
            cvs.moveTo(x, y);
            cvs.arc(x, y, r, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180);
        }
        cvs.lineWidth = 3;
        cvs.strokeStyle = "#000";
        cvs.stroke();

        //用圆覆盖，只流短刻度
        cvs.beginPath();
        cvs.arc(x, y, r * (18 / 20), 0, 2 * Math.PI);
        cvs.fillStyle = "#fff";
        cvs.fill();
        cvs.strokeStyle = "#fff";
        cvs.stroke();


        //时针
        cvs.beginPath();

        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (8 / 20), H, H);

        cvs.lineWidth =5;
        cvs.strokeStyle = "#000";
        cvs.stroke();


        // 分针
        cvs.beginPath();

        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (13 / 20), M, M);

        cvs.lineWidth = 3;
        cvs.strokeStyle = "#000";
        cvs.stroke();
        //秒针
        cvs.beginPath();

        cvs.moveTo(x, y);
        cvs.arc(x, y, r * (17 / 20), S, S);

        cvs.lineWidth = 1;
        cvs.strokeStyle = "#000";
        cvs.stroke();
    }
     time();
     setInterval(time,1000)
    </script>
</body>

</html>